<template>
    <div>
        <div class="title">周末去哪儿</div>
        <ul class="item border-bottom" v-for="item of weekendList" :key="item.id">
                <div class="img-wrapper">
                    <img  class='item-img' :src="item.imgUrl" >
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class='item-desc'>{{item.desc}}</p>
                   
                </div>
            
        </ul>
    </div>
</template>
<script>
export default {
    name:'homeWeekend',
    props:{
        weekendList:Array
    },
    data() {
        return {
        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/mixmins.styl';
    .title
        line-height :.8rem
        background :#eee
        text-indent: .2rem
        // margin-top : .2rem
    .img-wrapper 
        height: 0
        overflow: hidden
        padding-bottom:33%
        .item-img
            width 100%
    .item-info
        padding: .1rem 
        .item-title
            line-height :.54rem
            font-size :.32rem
            etc();
        .item-desc
            line-height :.4rem
            color :#ccc
            etc();
            
</style>